<template>
  <div class="news">
    <div class="news_pic">
      <div class="news_back" @click="back" v-if="!isShare"></div>
      <img :src="infos.image" />
    </div>
    <div class="news_content">
      <div class="title">{{infos.title}}</div>
      <div class="publish">
        <div class="author_pic">
          <img :src="infos.head_url" />
        </div>
        <div class="author">{{infos.writer}}</div>
        <div class="publish_time">{{infos.date}}</div>
      </div>
      <div class="content" v-html="infos.content"></div>
      <div class="more" @click="toggle" v-if="contentStatus">
        <div class="more_txt" v-text="text"></div>
        <div :class="state ? 'pull_down' : 'pick_up'"></div>
      </div>
    </div>
    <div class="foot_nav">
      <div class="share_menu">
        <div class="nav_see">浏览量{{infos.views}}次</div>
        <div class="nav_share"></div>
      </div>
    </div>
    <temp_top></temp_top>
  </div>
</template>

<script>
import temp_top from "./common.vue";
export default {
  name: "News",
  data() {
    return {
      app: "",
      state: true,
      infos: "",
      contentStatus: false
    };
  },
  computed: {
    isShare: function() {
      return location.href.indexOf("isShare=") !== -1;
    }
  },
  created() {
    var news_id = this.$route.query.id;
    this.getShare();
    this.$axios
      .get("/v1/common/articleDetail", {
        params: {
          id: news_id
        }
      })
      .then(
        res => {
          var data = res.data;
          if (data.code == 200) {
            this.infos = data.data;
          } else {
            Toast(data.msg);
          }
        },
        res => {
          console.log("error");
        }
      );
  },
  methods: {
    getShare() {
      var that = this;
      var params = new URLSearchParams();
      params.append("type", 4); //你要传给后台的参数值 key/value
      params.append("article_id", this.$route.query.id);
      this.$axios({
        url: "/v1/common/share",
        method: "post",
        data: params
      }).then(function(res) {
        let data = JSON.stringify(res.data.data);
        if (!that.$route.query.isShare) {
          var url = window.location.href + "&isShare=true";
        } else {
          var url = window.location.href;
        }
        that.wxShare.wxShowMenu(url, data);
      });
    },
    back() {
      this.$router.go(-1);
    }
  },
  components: {
    temp_top: temp_top
  }
};
</script>
<style scoped>
.news_pic {
  width: 100%;
  position: relative;
}
.news_back {
  width: 60px;
  height: 60px;
  background: url("/static/images/detail_go_back.png") no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 40px;
  left: 26px;
  opacity: 0.3;
}
.news_pic img {
  width: 100%;
  border-radius: 0 0 0 80px;
}
.news_content {
  width: 698px;
  margin: 0 auto;
}
.title {
  font-size: 36px;
  color: #000000;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 26px;
}
.publish {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 40px;
}
.author_pic {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.author_pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.author {
  font-size: 28px;
  color: #333334;
  margin: 0 20px;
  line-height: 50px;
}
.publish_time {
  color: #9b9b9b;
  font-size: 28px;
  line-height: 52px;
}
.content {
  margin-bottom: 136px;
  width: 100%;
}
.content >>> img {
  max-width: 100%;
}
.more {
  font-size: 28px;
  color: #9b9b9b;
  text-align: center;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.pull_down {
  width: 30px;
  height: 30px;
  background: url("/static/images/pull_down.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 6px;
  margin-left: 10px;
}
.pick_up {
  width: 30px;
  height: 30px;
  background: url("/static/images/pack_up.png") no-repeat center center;
  background-size: 100% 100%;
  margin-top: 6px;
  margin-left: 10px;
}
.foot_nav {
  width: 100%;
  height: 120px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}
.share_menu {
  width: 698px;
  margin: 0 auto;
  border-top: 2px solid #ececec;
  display: flex;
  justify-content: space-between;
  z-index: 99;
}
.nav_see {
  font-size: 28px;
  color: #9b9b9b;
  line-height: 120px;
  margin-left: 14px;
}
.nav_share {
  display: flex;
  justify-content: space-between;
}
.share_img {
  width: 36px;
  height: 36px;
  margin-top: 42px;
}
.share_img img {
  width: 100%;
  height: 100%;
}
.share_name {
  font-size: 28px;
  color: #9b9b9b;
  margin-left: 12px;
  line-height: 120px;
}
</style>